IOS常看到的UI - UITableView(i.e Android的listView),常用來顯示清單,以下我們將簡單介紹UITableView常用到的system callback來幫助我們定義使用者操作UITableView的行為與修改清單每一列的UI

Note: 我們不直接使用UITableViewController當作範例,因為通常我們的畫面不只有清單,還會有其他UI元件

1.一開始先拉一個UITableView到ViewController中,如下圖:

2.再拉一個UITableViewCell到UITableView中,UITableViewCell負責我們每一列的UI

3. 為我們的UITableViewCell拉一個UILabel來顯示我們的人名資料（p.s 設定UI請自行遵守AutoLayout要求,這裡只簡單把UILabel設定上下置中(Vertically in Container)且UILabel距離SuperView左右間距為0 ）

4. 為UITableViewCell創一個Custom Class,這樣我們才能設定每一列要顯示的人名

先在storyboard中的Identity Inspector中去設定UITableViewCell元件由我們創的Custom Class(CustomTableViewCell)所控制.同時也要為我們的TableViewCell設定Indentifier(cell1),之後我們在程式碼中會用到

5.從storyboard對UILabel元件按住ctrl並拖曳到CustomTableViewCell中,Xcode會為我們自動產生@IBOutlet

6. 為了讓我們的UIViewController能夠對UITableView的資料做一些設定(By UITableViewDataSource)與收到使用者操作UITableView的SystemCallback及動態調整UI(By UITableViewDelegate)，我們一樣需要在UIViewController內創建UITableView的@IBOutlet,並讓我們的UIViewController去擴充UITableViewDataSource和UITableViewDelegate的function.

我們在這裡希望用UIViewController去控制UITableView的行為,所以我們把UITableViewDataSource和UITableViewDelegate的delegate設為self,這樣才能執行到我們定義在UIViewController內的UITableViewDataSource和UITableViewDelegate Function
(p.s 如果你是希望在其他class中去實作UITableViewDataSource和UITableViewDelegate Function,你就需要把delegate設定成你希望的那個class instance)

Note: 因為UITableViewDataSource和UITableViewDelegate是Protocol,再加上UITableViewDataSource和UITableViewDelegate為我們的ViewController的Extension,其實就是實作了IOS推薦我們用的Protocol Oriented Programming,

class ViewController: UIViewController {
    @IBOutlet weak var mTableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
         //set ViewController as UITableViewDelegate's Delegate
        mTableView.delegate = self   
        //set ViewController as UITableViewDataSource's Delegate
        mTableView.dataSource = self  
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //--
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //--
    }
}

extension ViewController: UITableViewDelegate {
    
}

7. 設定每一列的資料與TableView的資料列數(By UITableViewDataSource)

由UITableViewDataSource這個名稱,我們就可以知道他掌管了tableView所有和資料有關的事(ex: 每一列要顯示什麼資料,總共幾列,某一列能不能刪除,移動某一列

class ViewController: UIViewController {
    @IBOutlet weak var mTableView: UITableView!
    let list = ["Kevin","Mary","Jay","Steven"]
    override func viewDidLoad() {
        super.viewDidLoad()
        //set ViewController as UITableViewDelegate's Delegate
        mTableView.delegate = self
        //set ViewController as UITableViewDataSource's Delegate
        mTableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = mTableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath as IndexPath) as! CustomTableViewCell
        cell.mLabel.text = list[indexPath.row]
        return cell
    }
}

extension ViewController: UITableViewDelegate {
    
}

現在你應該就能看到UITableView列出所有存在list中的人名,完整專案在下面這個連結：https://github.com/tgnivekucn/UITableViewSample

明天我們將講述關於UITableView的其他控制function(at UITableViewDataSource & UITableViewDelegate)與客製化UI